<template>
  <section class="recommend">
    <swipe class="my_swipe" :auto=2000 :showIndicators = false :continuous=true>
      <swipe-item class="swipeItem" v-for="slide in sliders">
        <a :href="slide.linkUrl">
          <img :src="slide.picUrl" alt="">
        </a>
      </swipe-item>
    </swipe>
    <h2>热门歌单推荐</h2>
    <div class="songList_list">
        <scroll  class="songList_wrapper" :data="songList">
          <ul>
            <li v-for="value in songList">
              <a :href='"https://y.qq.com/n/yqq/playlist/" + value.dissid + ".html"'>
                <div class="list">
                  <img :src="value.imgurl" class="list_l">
                  <div class="list_r">
                    <p>{{value.creator.name}}</p>
                    <p>{{value.dissname}}</p>
                    <p><i class="iconfont icon-icons64x6459"></i> {{value.listennum | showWan}}</p>
                  </div>
                </div>
              </a>
            </li>
          </ul>
        </scroll>
    </div>
    
  </section>
</template>

<style scoped lang='less'>
  * {
    margin: 0;
    height: 0;
  }
  .recommend {
    height:100%;
    .my_swipe{
      height:3rem;
      width:7.5rem;
      .swipeItem{
        width:7.5rem;
        a{
          display: block;
          height:100%;
          width:100%;
          img{
            /*display: block;*/
            height:100%;
            width:100%;
          }
        }
      }
    }
    h2{
        height:1rem;
        line-height:1rem;
        color: #ffcd32;
        font-size: .3rem;
        width:100%;
        text-align: center;
      background-color: #222;
      }
      .songList_list{
        position: fixed;
        top: 5.5rem;
        height:100%;
        width:100%;
        .songList_wrapper{
          height:100%;
          width:100%;
          background-color: #222;
          overflow: hidden;
          ul{
            height:100%;
            li{
              box-sizing: border-box;
              margin: 0.4rem 0;
              padding: 0 0.3rem;
              height:1.4rem;
              /*width:100%;*/
              a{
                display: inline-block;
                height:1.4rem;
                width:100%;
                list-style: none;
                .list{
                  height:100%;
                  display: flex;
                  .list_l{
                    height:100%;
                    flex: 2;
                    /*background-color: red;*/
                  }
                  .list_r{
                    box-sizing: border-box;
                    padding: 0 .3rem;
                    height:100%;
                    flex: 6;
                    /*background-color: #0086b3;*/
                    color: #aaa;
                    p{
                      box-sizing: border-box;
                      padding-right: .3rem;
                      height:.3rem;
                      font-size: .24rem;
                      i{
                        display: inline-block;
                        height:.3rem;
                        width:.3rem;
                        font-size: .3rem;
                        color: #fff;
                      }
                      &:nth-child(1){
                        color: #ffcd32;
                      }
                      &:nth-child(2){
                        margin: 0.26rem 0;
                        color: #aaa;
                        height:0.24rem;
                        line-height:0.24rem;
                        overflow:hidden;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  
  
</style>

<script>
  import Request from '../../api/request'
  import { Swipe, SwipeItem } from 'vue-swipe';
  import Scroll from "../base/scroll.vue";
  export default {
    data () {
      return {
        sliders:[],
        songList:{}
      }
    },
    created () {
      console.log("route=>",this.$route.path);
      this._getRecommend();
      this._getSongList();
    },
    mounted(){
      this._getSongList();
    },
    methods: {
      _getRecommend () {
        Request.getRecommend().then((res) => {
          if (res.code === 0) {
            this.sliders = res.data.slider;
            console.log(this.sliders);
          }
        })
      },
      _getSongList() {
        this.axios.get("http://172.18.18.51:8860/songList.json").then((res) => {
          this.songList = res.data.result.list;
          console.log(this.songList);
        })
      }
    },
    computed:{
    
    },
    mounted(){
    
    },
    components: {
      Swipe,
      SwipeItem,
      Scroll
    }
    
  }
</script>
